<template>
  <div class="container">
<!--    <JcTitle name="首 页"></JcTitle>-->
    <div class="logUser">
      <div class="logoflex">
        <img src="../../assets/svg/logo.png" alt="">
        <div>惠州杰希制造公司</div>
      </div>
      <div>
        <el-button v-if="whether > 0" type="warning" @click="update">
          <i class="el-icon-refresh-right"></i>更新
        </el-button>
        欢迎 <span style="color: rgb(236,38,38)">{{ username }}</span> 登录系统！
      </div>
    </div>
    <ul class="botm">
      <li @click="pushView('/forWork')">
        我要报工
      </li>
      <li @click="pushView('/workOrder')">
        报工查询
      </li>
      <li @click="pushView('/assignment')">
        作业指导书
      </li>
      <li @click="pushView('/salary')">
        <!-- /salary -->
        查询工资
      </li>
    </ul>
    <div class="logOut" @click="clickCell">
      <i class="el-icon-switch-button"></i>退出登录
    </div>
  </div>
</template>

<script>

import JcTitle from "../../components/Title";
import {queryViewItem} from "@/api/zhuye";

export default {
  components: {
    JcTitle
  },
  data() {
    return {
      username: '',
      whether: 0
    }
  },
  created() {
    this.fpaezDataType()
    this.username = window.localStorage.getItem('perUser')
  },
  methods: {
    // 是否更新
    async fpaezDataType() {
      const { data: RES } = await queryViewItem({ viewName: 'REPORT_WORK' })
      this.whether = RES.list.length
    },
    // 更新
    update() {
      window.open('http://14.29.79.10:8808/jc/image/common/baogong.apk')
    },
    pushView (ev) {
      this.$router.push({ path: ev })
    },
    // 退出登录
    clickCell() {
      this.$confirm('确定要退出登录吗？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        window.sessionStorage.removeItem('mobileToken')
        window.sessionStorage.removeItem('xuanpin')
        this.$router.push({ path: '/login' })
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  .logOut {
    position: fixed;
    bottom: 70px;
    right: 20px;
    font-size: 22px;
    color: #666;
  }
  .logOut2 {
    position: fixed;
    bottom: 110px;
    right: 20px;
    font-size: 22px;
    color: #ff8a0e;
  }
  .logUser {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 70px;
    font-size: 22px;
    color: #666;
    .logoflex {
      display: flex;
      align-items: center;
      img {
        height: 100px;
        width: auto;
        margin-right: 20px;
      }
      div {
        color: #333;
        font-size: 36px;
      }
    }
  }
}
.botm {
  margin: 0;
  padding: 70px 0 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  li {
    text-align: center;
    width: 35%;
    padding: 42px 50px;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 8px;
    font-size: 42px;
    margin-top: 5%;
    background: #1e9fff;
    border-radius: 10px;
  }
}
</style>
